<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP地址</th>
							<th>执行时间</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据加载中...</td>
					    </tr>

					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">

			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function(){

		//简写
		$("#pageId").load("doPageUI",doGetObjects);
		//点击按钮事件注册
		$(".input-group-btn").on("click",".btn-search",doQueryObjects)
				.on("click",".btn-delete",doDeleteObjects);

		//基于thead中checkbox状态，修改tbody中的checkbox状态
		$("#checkAll").click(doChangTbodyCheckBoxState);
		//基于tbody中checkbox状态，修改tbody中的checkbox状态
		$("#tbodyId").on(
				"change",
				".cBox",
				doChangThreadCheckBoxState);
	})

	function doChangTbodyCheckBoxState(){
		//1.获取全选checkbox对象状态
		var state=$(this).prop("checked");
		//2.修改tbody中checkbox的状态
		$("#tbodyId input[type='checkbox']")
		.each(function (){
			$(this).prop("checked",state);
		})
	}
//基于tbody中checkbox状态，修改tbody中的checkbox状态
function doChangThreadCheckBoxState(){
		//1.定义一个变量，一个特定初始化值true
		var flag=true;
		//2.获取tbody中checkbox对象状态并与flag进行逻辑与操作
		$("#tbodyId input[type='checkbox']")
		      .each(function (){
		      	flag=flag && $(this).prop("checked");
			  })
		//3.修改thead中checkbox值
		$("#checkAll").prop("checked",flag);
	}
//删除后刷新页面的值
function doSetPageCurrent(){
	var pageCount=$("#pageId").data("pageCount");
	var pageCurrent=$("#pageId").data("pageCurrent");
	var checkAll=$("#checkAll").prop("checked");
	if(pageCurrent==pageCount && checkAll && pageCurrent>1){
		pageCurrent--;
		$("#pageId").data("pageCurrent",pageCurrent);
	}
}

	//点击删除按钮执行删除操作
	function doDeleteObjects(){
		//1.获取选中记录对象的checkbox属性标签的id的值进行校验
		var idArray=doGetCheckedIds();
		//console.log(idArray.toString())
		if(idArray.length==0){
			alert("至少选择一个");
			return;
		}
		if(!confirm("确认删除吗？"))return;
		//2.构建请求参数
		var params={"ids":idArray.toString()};
		//3.构建请求url
		var url="log/doDeleteObjects";
		//4.发送异步请求执行删除
		$.post(url,params,function (result){
			if(result.state==1){
				doSetPageCurrent();
				doGetObjects();
			}else{
				alert(result.message);
			}
		})
	}
	//获取用户选中的记录的id并存储到数组中
	function doGetCheckedIds(){
		//定义数组
		var idArray=[];
		//迭代所有的tbody中CheckBox，将选中的值存储到数组中
		$("#tbodyId input[type='checkbox']")
				.each(function (){
					//判断元素是否选中
					if ($(this).prop("checked")){
						idArray.push($(this).val())
					}
				})
		//返回存储了的id的数组
		return idArray;
	}
	//基于用户名进行日志查询
	function doQueryObjects(){
		//初始化当前页面的页码值
		$("#pageId").data("pageCurrent",1);
		//2.基于用户名查询
		//var username=$("#searchNameId").val();
		doGetObjects(username);
	}
	//异步加载服务 端日志数据
	function doGetObjects(){
		//每次查询前都给全选按钮初始化值为false
		$("#checkAll").prop("checked",false);
		//1.定义请求参数
		var pageCurrent=$("#pageId").data("pageCurrent");
		console.log(pageCurrent);
		//判断语句所表述的意思是：当打开页面的情况下，默认初始值为1
		//判断paheCurrent在没有值的情况下，给它赋值1
		if (!pageCurrent)pageCurrent=1;
		var params={"pageCurrent":pageCurrent};
		//debugger
		var uname=$("#searchNameId").val();
		if (uname)params.username=uname;
		//console.log("params",params);
		//2.定义请求url
		var url="log/doFindPageObjects";
		//3.发起异步请求加载日至函数
		//getJson是jQuery中的函数，用于向服务器发起get请求
		//讲服务器端返回的JSON串直接转换为JS对象
		//function  (result){}会在服务端响应到客户端以后执行
		$.getJSON(url,params,function (result){
			console.log("result",result);
			//处理回调函数
			doHandleResponseResult(result);
		})
	}

	//处理服务端的响应结果
	function doHandleResponseResult(result){
		if(result.state==1){
			//1.呈现日志记录，将数据呈现在页面上
			//console.log(result.data.records)
			console.log(result.data);
			//定义函数
			doSetTableBodyRows(result.data.records)
			doSetPagination(result.data);
		}else{
			alert(result.message);

		}
	}
	function doSetTableBodyRows(records){
	//1，获取tbody对//1，获取tbody对象
		var tbody=$("#tbodyId");
		//清空之前记录
		tbody.empty();

		for (var i in records){
			//构建tr对象
			var tr=$("<tr></tr>");
			//.构建tds对象
			var tds=doCreateTds(records[i]);
			//将tds追加到tr
			tr.append(tds);
			//将tr追加到body
			tbody.append(tr);
		}

	}
	//创建每行td元素，并填充具体业务数据
	function doCreateTds(data){
		var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'/></td>"+
				"<td>"+data.username+"</td>"+
				"<td>"+data.operation+"</td>"+
				"<td>"+data.method+"</td>"+
				"<td>"+data.params+"</td>"+
				"<td>"+data.ip+"</td>"+
				"<td>"+data.time+"</td>";
		return tds;
	}
</script>











